<template>
    <view class="navbar">
        <view class="navbar-fixed">
            <!-- 状态栏小程序撑起高度 -->
            <view :style="{ height: statusBarHeight + 'px' }"></view>
            <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }">
                <up-icon name="arrow-left" size="19" @click="goBack"></up-icon>
                <view class="navbar-search">
                    <view class="navbar-search_icon">
                        <up-icon name="search" size="20" color="#333"></up-icon>
                    </view>
                    <view class="navbar-serach">
                        <input class="navbar-search_text" type="text" v-model="val"
                            placeholder="请输入您要搜索的内容" />
                    </view>
                </view>
            </view>
        </view>
        <!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
        <view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
    </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const emit = defineEmits(['update:modelValue'])

const goBack = () => {
    uni.navigateBack()
}

// 节流函数
function throttle(fn, delay) {
    let timer = null
    return function (...args) {
        if (timer) return
        timer = setTimeout(() => {
            fn.apply(this, args)
            timer = null
        }, delay)
    }
}

// 状态栏高度
const statusBarHeight = ref(20)
// 导航栏高度
const navBarHeight = ref(45)
// 窗口宽度
const windowWidth = ref(375)
// 搜索框的值（本地维护，和 modelValue 双向同步）
const val = ref(props.modelValue)

// 监听外部 modelValue 变化，更新本地 val
watch(() => props.modelValue, (newVal) => {
    val.value = newVal
})

// 节流触发 update:modelValue
const emitThrottled = throttle((v) => {
    emit('update:modelValue', v)
}, 300)

// 监听本地 val 变化，节流后同步到父组件
watch(val, (newVal) => {
    emitThrottled(newVal)
})

onMounted(() => {
    // 获取手机系统信息
    const info = uni.getSystemInfoSync()
    statusBarHeight.value = info.statusBarHeight
    windowWidth.value = info.windowWidth
    console.log(info, "navbar")
    // #ifndef H5 
    // 获取胶囊的位置
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    console.log(menuButtonInfo, "navbar")
    // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
    navBarHeight.value = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
    windowWidth.value = menuButtonInfo.left
    console.log(navBarHeight.value, "navbar")
    console.log(windowWidth.value, "navbar")
    // #endif
})
</script>

<style lang="scss">
@import '@/index.scss';

.navbar {
    background-color: #fff;

    .navbar-fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        background-color: #fff;
        border-bottom: 1rpx solid #fbfafa;

        .navbar-content {
            display: flex;
            gap: 12rpx;
            align-items: center;
            padding: 0 15px;
            height: 45px;
            box-sizing: border-box;

            .navbar-search {
                display: flex;
                align-items: center;
                padding: 0 10px;
                width: 100%;
                height: 30px;
                border-radius: 30px;
                background: #F6F6F6;

                .navbar-search_icon {
                    // width: 10px;
                    // height: 10px;
                    margin-right: 10px;
                }

                .navbar-search_text {
                    width: 100%;
                    font-size: 14px;
                    color: #999;
                }
            }

            &.search {
                padding-left: 0;

                .navbar-content__search-icons {
                    margin-left: 10px;
                    margin-right: 10px;
                }

                .navbar-search {
                    border-radius: 5px;
                }
            }
        }

    }

}
</style>